<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>04 侧边栏动画效果</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 200px;
        height: 200px;
        background-color: red;
        position: relative;
        left: -200px;
    }

    #box span {
        position: absolute;
        width: 40px;
        height: 60px;
        color: #fff;
        background-color: #000000;
        right: -40px;
        top: 50%;
        margin-top: -30px;
        line-height: 60px;
        text-align: center;
    }
    </style>
</head>

<body>
    <div id="box">
        <span>拉开</span>
    </div>
    <script type="text/javascript">
    window.onload = function() {
        var box = document.getElementById('box');
        var timer = null,
            speed = 0;
        box.onmouseover = function() {
            startAnimation(this, 0);

        }
        box.onmouseout = function() {
            startAnimation(this, -200);

        }
        
        function startAnimation(obj, end) {
            // 先关闭定时器
            clearInterval(timer);
            speed = end > obj.offsetLeft ? 5 : -5;
            timer = setInterval(function() {
                if (obj.offsetLeft === end) {
                    clearInterval(timer);
                    return;
                }
                obj.style.left = obj.offsetLeft + speed + 'px';
            }, 30);
        }
    }
    </script>
</body>

</html>